<template>
  <div class="logibox layout-login">
    <div class="login-page">
      <div class="login">
        <div class="login-inner">
          <div class="title">
            <h2>重置密码</h2>
          </div>
          <div class="regis-main">
            <template>
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="手机注册" name="first">
                  <div class="formbox">
                    <div class="login-form">
                        <el-form ref="form" :model="form" label-width="80px" :label-position="labelPosition">
                          <el-form-item label="手机号码">
                            <el-input v-model="form.name"></el-input>
                          </el-form-item>
                          <el-form-item label="设置密码">
                            <el-input v-model="form.name"></el-input>
                          </el-form-item>
                          <el-form-item label="确认密码">
                            <el-input v-model="form.name"></el-input>
                          </el-form-item>
                          <el-form-item label="验证码">
                            <el-input v-model="form.name"></el-input>
                          </el-form-item>
                        </el-form>
                    </div>
                    <div class="forwordbox flex-between">
                      <p></p>
                      <p class="forret" @click="navigateTo('/user/resetpwd')">忘记密码?</p>
                    </div>
                    <div class="login-btn">
                        <el-button type="primary" @click="onSubmit">登录</el-button>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="邮箱注册" name="second">
                  <div class="formbox">
                    <div class="login-form">
                        <el-form ref="form" :model="form" label-width="80px" :label-position="labelPosition">
                          <el-form-item label="邮箱账号">
                            <el-input v-model="form.name"></el-input>
                          </el-form-item>
                          <el-form-item label="设置密码">
                            <el-input v-model="form.name"></el-input>
                          </el-form-item>
                          <el-form-item label="确认密码">
                            <el-input v-model="form.name"></el-input>
                          </el-form-item>
                          <el-form-item label="验证码">
                            <el-input v-model="form.name"></el-input>
                          </el-form-item>
                        </el-form>
                    </div>
                    <div class="forwordbox flex-between">
                      <p></p>
                      <p class="forret" @click="navigateTo('/user/resetpwd')">忘记密码?</p>
                    </div>
                    <div class="login-btn">
                        <el-button type="primary" @click="onSubmit">登录</el-button>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </template>
          </div>
          
        </div>
        <!-- QRCODE ----AD---- -->
        <div class="qrcodedown">
          <div class="qrbox">
            <vue-qr :text="downAppurl" qid="testid" :size="60" :margin='5' ></vue-qr>
          </div>
          <div class="right-txt">
            <p class="toptip">交易所全球站App</p>
            <p class="toptip">随时随地 便捷交易</p>
            <p class="tips">扫描二维码下载交易所App</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import loginModal from "@/components/Login/LoginModal.vue";
import verCode from "@/components/other/verCode";
import VueQr from "vue-qr";
import { Toast } from "vant";
export default {
  components: { loginModal, verCode,VueQr },

  data() {
    const bg = require("@/assets/images/user/dl_bj.png");
    return {
      bg: `background-image:url(${bg})`,
      labelPosition: 'top',
      downAppurl:'',
      activeName:'first',
      form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
      },
      checkLoginData: {
        account: "",
        password: "",
        verCode: ""
      },
      canGetCode: true,
      loginData: {
        type: "", //3 是google验证，1手机验证,2邮箱
        code: ""
      },
      myTel: "",
      myEmail: "",
      myGoogle: "",
      bindGoogleAuth: false,
      bindEmail: false,
      bindCellphone: false,
      checkLogin: false,
      getCodeTimes: 0,
      codeTexti18n: "getMsgCode",
      second: "",
      myCode: false,
      verCodeNumArr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      verCodeStr: "",
      oldPath: "",
      canSubmit: false,
      IPS:'',
      areacode:'',
      loginData:{
        areacode:'',
      },
      member:'',
    };
  },
  created() {
    this.downAppurl= `${this.api.downAppurl}`;
  },
  mounted() {
    this.createCode(this.verCodeNumArr, 4);
  },

  methods: {
    handleClick(tab, event) {
        console.log(tab, event);
    },
    // 生成图片验证码
    createCode(arr, len) {
      let str = "";
      for (let i = 0; i < len; i++) {
        str += this.verCodeNumArr[
          this.Util.randomNum(0, this.verCodeNumArr.length)
        ];
      }
      this.verCodeStr = str;
    },
    onSubmit(){

    },
    sendCode() {
      if (!this.canGetCode) return false;
      this.countDown();
      let [type, account] =
        this.loginData.type == "2" ? ["8", this.myEmail] : ["7", this.myTel];
        if(this.loginData.type==2){
          this.areacode='0'
        }else if(this.loginData.type==1){
          this.areacode=this.loginData.areacode;
        }
        console.log(this.loginData.type);
        console.log(this.checkLoginData.account);
      let Taccount = this.member;
      this.request(this.api.getcode, {
        type: type,
        token: Taccount,
        ip:this.IPS,
        showLoading: true,
        areacode:this.areacode
      }).then(res => {
        if (res.code == "0") {
          this.myCode = true;
          this.successMsg(res.msg);
        } else {
          this.errMsg(res.msg || "获取验证码失败");
        }
      });
    },
    // 倒计时函数
    countDown() {
      this.timer = this.Util.timerCounter({
        onStart: t => {
          this.canGetCode = false;
          this.getCodeTimes += 1;
          this.second = `${t}s`;
          this.codeTexti18n = "countDown";
        },
        onCounting: t => {
          this.second = `(${t}s)`;
          this.codeTexti18n = "countDown";
        },
        onComplete: () => {
          this.canGetCode = true;
          if (this.getCodeTimes > 0) {
            this.codeTexti18n = "tryAgain";
            this.second = "";
          }
        }
      });
    },
    // 表单验证
    validate(val, name) {
      if (val == "") return;
      this.canSubmit = true;
      switch (name) {
        case "account":
          if (!this.Util.isUserName(val)) {
            this.errMsg("label159");
            this.canSubmit = false;
          }
          break;
        case "cellphone":
          if (!this.Util.isPhone(val) && !this.Util.isEmail(val)) {
            this.errMsg("label156");
            this.canSubmit = false;
          }
          break;
        case "verCode":
          if (val != this.verCodeStr) {
            this.errMsg("label126");
            this.canSubmit = false;
          }
          break;
      }
    },
    // 登录验证
    loginHandle() {
      if (this.loginData.code == "") {
        this.errMsg("请填写完整信息");
        return;
      }
      let account = "";
      if (this.loginData.type == "0") {
        account = this.checkLoginData.account;
      } else if (this.loginData.type == "1") {
        account = this.myTel;
      } else if (this.loginData.type == "2") {
        account = this.myEmail;
      }
      console.log(this.myEmail);
      
      this.request(this.api.checkcode, {
        type: this.loginData.type,
        code: this.loginData.code,
        member: account,
        // member:this.checkLoginData.account,
        device:1,
        ip:this.IPS,
        showLoading: true
      }).then(res => {
        if (res && res.code != "0") {
          this.errMsg(res.msg || "登录失败");
          return false;
        }
        this.successMsg(res.msg);
        this.userModel.isLogin = true;
        this.storage.set("isLogin", true);
        this.storage.set("token", res.data.token);

        if (res.data!=[]) {
          this.userModel.cellphone = res.data.tel;
          this.userModel.email = res.data.email;
          this.storage.set("cellphone", res.data.tel || "");
          this.storage.set("email", res.data.email || "");
        }
        this.storage.set("tradePasswordChecked", false);
        this.navigateTo("/");
      });
    },
    // 登录第一步
    loginStep() {
      if (!this.canSubmit) return;
      this.request(this.api.login, {
        member: this.checkLoginData.account,
        loginpassword: this.checkLoginData.password,
        showLoading: true
      }).then(res => {
        if(res.code==0){
          this.$message({
            message: res.msg,
            type: 'success'
          });
          this.loginData.areacode=res.data[0].areacode;
          console.log(this.loginData.areacode);
          this.bindGoogleAuth = res.data[0].googlestate;
          this.bindCellphone = res.data[0].telstate;
          this.bindEmail = res.data[0].emailstate;
          this.myTel = res.data[0].member || "";
          this.myEmail = res.data[0].member || "";
          this.member=res.data[0].member || "";
          this.myGoogle = res.data.member || "";
          this.checkLogin = true;
        }else if (res && res.code == "30") {
          this.errMsg(res.msg || "登录失败");
          return false;
        }else if(res.code==1103){
          this.errMsg(res.msg || "登录失败");
          return false;
        }else{
          this.errMsg(res.msg || "登录失败");
          return false;
        }  
      });
    },
    //验证方式切换 切换时初始化验证码发送定时器
    onTypeChage() {
      this.timer && clearInterval(this.timer);
      this.codeTexti18n = "getMsgCode";
      this.loginData.code = "";
      this.second = "";
      this.canGetCode = true;
      this.myCode = false;
    }
  },
  watch: {
    "loginData.type": "onTypeChage"
  }
};
</script>
<style lang="scss" scoped>
.layout-login{
    background-color: #242e47;
    height: 900px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #171c2c;
  .login {
    color: #263241;
    width: 526px;
    height: 200px;
    margin: 10vh auto auto;
    
    .login-inner{
      border-radius: 3px;
      background-color: #fff;
      padding: 0 48px 48px;
    }
    .title{
      font-size: 20px;
      height: 88px;
      line-height: 88px;
      text-align: center;
    }
    .forwordbox{
      .forret{color: #357ce1;cursor: pointer;}
    }
    .login-btn{
      margin-top: 30px;
      button{width: 100%;}
    }
  }
  //  qrad
  .qrcodedown{
    margin-top: 16px;
    overflow: hidden;
    border-radius: 3px;
    padding: 18px 24px;
    display: flex;
    background-color: #334164;
    background-repeat: no-repeat;
    background-position: bottom right 24px;
    background-image: url(https://file.huobiasia.vip/global/zh-cn/static/img/e46bbe8.svg);
    .qrbox{
      width: 62px;
      height: 62px;
      padding: 2px;
      background: #fff;
    }
    .right-txt{
      margin-left: 15px;
      .toptip{color: #fff;font-size: 14px;margin-bottom: 7px;}
      .tips{
        color: #8199c3;
        font-size: 12px;
        margin-top: 15px;
      }
    }
  }
}
</style>